import product from '../../../../imgs/product-1.jpg'
import Rate from '@ui/RJMart/rate'
import CommonUtils from '../../common/utils/CommonUtils'
import HttpUtils from '../../common/utils/HttpUtils'
import Pagination from '@ui/RJMart/pagination'
import ToastUtils from '@page/common/utils/ToastUtils'


export default class Evaluation extends React.Component{
    constructor(props){
        super(props)
        this.state={
            choosed:0,
            pageNo:1,
        }

        this.headerTitle=[
            `全部评价(0)`,
            `好评(0)`,
            `中评(0)`,
            `差评(0)`
        ]
    }

    componentDidMount() {
        const {type}=this.props
        this.getComment(type)
    }


    componentWillReceiveProps(nextProps) {

        if(nextProps.type!=this.props.type){

            let pageReset=1
            this.setState({
                choosed:0
            },()=>this.getComment(nextProps.type,pageReset))

        }
    }


    getComment(type,pageReset){

        if(type==1){
            if(pageReset){
                this.setState({
                    pageNo:1
                }, this.getTotalComments)
            }
            else{
                this.getTotalComments()
            }

        }
        else if(type==2){
            if(pageReset){
                this.setState({
                    pageNo:1
                },this.getCompanyComments)
            }
            else{
                this.getCompanyComments()
            }
        }
    }


    getTotalComments() {
        const {productId}=this.props
        const {pageNo}=this.state
        ToastUtils.loading()
        HttpUtils.getProductComments(productId, pageNo, 10)
            .then(res => {
                console.log(res);
                ToastUtils.hide()
                this.setState({
                    comment: res.data
                });
            })
            .catch(err => {
                ToastUtils.hide()
                console.log(err);
            });
    }

    getCompanyComments() {
        const {productId}=this.props
        const {pageNo}=this.state
        ToastUtils.loading()
        HttpUtils.getCompanyComments(productId, pageNo, 10)
            .then(res => {
                console.log(res);
                ToastUtils.hide()
                this.setState({
                    comment: res.data
                });
            })
            .catch(err => {
                ToastUtils.hide()
                console.log(err);
            });
    }

    //分页，下一页
    paginationChange(page) {
        const {type}=this.props
        this.setState({
            pageNo:page
        },()=>this.getComment(type))
    }


    getHeaderTitle(){
        const {comment}=this.state
        const {total,badCount,goodCount,midCount}=comment||{}
        return [
            `全部评价(${total||0})`,
            `好评(${goodCount||0})`,
            `中评(${midCount||0})`,
            `差评(${badCount||0})`
        ]
    }


    filterGoodComment(commentList){
        let _commentList=commentList.filter((item)=>{
            return item.level==5
        })
        return _commentList
    }

    filterMidComment(commentList){
        let _commentList=commentList.filter((item)=>{
            return item.level==3
        })
        return _commentList
    }

    filterBadComment(commentList){
        let _commentList=commentList.filter((item)=>{
            return item.level==1
        })
        return _commentList
    }

    filterComment(commentList,choosed){
        if(choosed==0){
            return commentList
        }
        else if(choosed==1){
           return this.filterGoodComment(commentList)
        }
        else if(choosed==2){
           return this.filterMidComment(commentList)
        }
        else{
           return this.filterBadComment(commentList)
        }

    }

    
    render(){
        const {choosed,comment,}=this.state

        const headerTitle=this.getHeaderTitle()
        const {commentList,argScore,total}=comment||{}

        let _commentList=this.filterComment(commentList,choosed)


        return(
            <div  className={'detail-evaluate'}>
                <div className={'detail-evaluate-top'}>
                    <div className={'detail-evaluate-top-stars'}>
                        <p className={'detail-evaluate-stars-p1'}>与描述相符</p>
                        <p className={'detail-evaluate-stars-p2'}>{argScore}</p>
                        <Rate value={argScore} readonly  />
                    </div>
                </div>
                <div className={'detail-evaluate-content' }>
                    <div className={'detail-evaluate-content-header'}>
                        {
                            headerTitle.map((item,index)=>(
                                <HeaderItem
                                    key={index}
                                    item={item}
                                    choosed={choosed==index}
                                    onClick={()=>{
                                        this.setState({
                                            pageNo:1,
                                            choosed:index
                                        },)
                                    }}
                                />
                            ))
                        }
                    </div>
                    <div className={'detail-evaluate-content-detail'}>
                        {
                            _commentList&&_commentList.map((item,index)=>(
                                <EvaluateContentItem
                                    key={index}
                                    index={index}
                                    item={item}
                                />
                            ))
                        }
                        {
                            _commentList&&_commentList.length==0&&(
                                <div className={'detail-evaluate-content-no-comments'}>
                                    <p>暂无数据</p>
                                </div>
                            )
                        }

                    </div>
                    {
                        this.renderPagination(_commentList)
                    }

                </div>
            </div>
        )
    }

    renderPagination(_commentList) {

        if(_commentList&&_commentList.length==0){
            return null
        }
       return (
           <div className={'footer-pagination'}>
               <Pagination
                   onChange={(page) => this.paginationChange(page)}
                   current={this.state.pageNo}
                   pageSize={10}
                   total={this.getPaginationTotal()}
               />
           </div>
       )
    }

    getPaginationTotal(){
        const {choosed}=this.state
        const {comment}=this.state
        const {total,badCount,goodCount,midCount}=comment||{}

        let paginationTotal=0
        if(choosed==0){
            paginationTotal=total
        }
        else if(choosed==1){
            paginationTotal=goodCount
        }
        else if(choosed==2){
            paginationTotal=midCount
        }
        else{
            paginationTotal=badCount
        }
        return paginationTotal
    }
}


class EvaluateContentItem extends React.Component{
    constructor(){
        super()
        this.state={
            choosed:-1
        }
    }
    render(){
        const {index,item}=this.props
        const {choosed}=this.state
        const {buyerName,deptName,productSpecification,createTime,content,pictureUrls,commentType}=item

        return(
            <div className={index==0? 'detail-evaluate-content-item0':'detail-evaluate-content-item'}>
                <div className={'detail-evaluate-item-texts'}>
                    <p className={'detail-evaluate-item-txt'}>
                        {content?content:(commentType==0? '此用户未及时做出评价，系统默认好评':'此用户未填写评价')}
                    </p>
                    <div className={'detail-evaluate-item-imgs'}>
                        {
                            pictureUrls&&pictureUrls.map((pic,idx)=>(
                                <div
                                    onClick={()=>{
                                        if(choosed==idx){
                                            this.setState({
                                                choosed:-1
                                            })
                                        }
                                        else{
                                            this.setState({
                                                choosed:idx
                                            })
                                        }

                                    }}
                                    key={`${index}-${idx}`}
                                    className={choosed==idx?'detail-evaluate-item-imgs-item1':'detail-evaluate-item-imgs-item'}
                                >
                                    <img src={pic} />
                                </div>
                            ))
                        }
                    </div>
                    {
                        choosed>-1?
                            <div
                                onClick={()=>{
                                    this.setState({
                                        choosed:-1
                                    })
                                }}
                                className={'detail-evaluate-item-bigimg'}>
                                <img src={pictureUrls[choosed]} alt=""/>
                            </div>
                            :
                            null
                    }
                    <p className={'detail-evaluate-item-date'}>
                        {CommonUtils.getDateStr(createTime)}
                    </p>
                </div>
                <div className={'detail-evaluate-item-guige'}>
                    <p>{productSpecification}</p>
                </div>
                <div className={'detail-evaluate-item-buyer'}>
                    <p>{buyerName}</p>
                    <p>{deptName}</p>
                </div>
            </div>
        )
    }
}

class HeaderItem extends React.Component{
    render(){
        const {choosed,item,onClick}=this.props;
        return(
            <div
                onClick={onClick}
                className={'detail-evaluate-content-header-item'}>
                <p className={choosed? 'detail-evaluate-content-header-item-p1':'detail-evaluate-content-header-item-p'}>{item}</p>
            </div>
        )
    }
}